<!--  -->
<template>
  <div>
     <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="(item,index) in banner" :key="index">
     <img :src="item.imageUrl"/>
    </el-carousel-item>
  </el-carousel>
     <h2>推荐歌单</h2>
    <div class="gedanlie">
           <div class="gepictu" v-for="(item,index) in list" :key="index">
               <img :src="item.picUrl"/>
               <p>{{item.name}}</p>
           </div>
    </div>
    <h2>最新音乐</h2>
    <div class="newmiic">
        <div class="newku" v-for="(item,index) in zuixin" :key="index">
            <img :src="item.picUrl"/>
            <div class="bof" @click="palymusic(item.id)"></div>
            <div class="textz">
                <p>{{item.name}}</p>
                <p>{{item.song.artists[0].name}}</p>
            </div>
            
        </div>

    </div>
    </div>
     



 
</template>

<script>
import axios from 'axios'
import "../assets/css/faxian.css"

export default {
   name:'faxian',
   data(){
   return{
       banner:[],
       list:[],
       zuixin:[]
   }
   },

  methods:{

  palymusic(id){
      
      axios({
           url:'https://autumnfish.cn/song/url',
           method:'get',
           params:{
               id:id
           }
    }).then(res=>{
         
        // this.banner=res.data.banners
       console.log(res)
        let url =res.data.data[0].url
      
        console.log(this.$parent.musicUrl)
        this.$parent.musicUrl=url
        
    })

  },

open3() {
        this.$message({
          message: '警告哦，这是一条警告消息',
          type: 'warning'
        });
      },

  },
  created(){
      console.log('created')
    axios({
           url:'https://autumnfish.cn/banner',
           method:'get',
    }).then(res=>{
         
        this.banner=res.data.banners
    })
    axios({
           url:'https://autumnfish.cn/personalized',
           method:'get',
           params:{
               limit:30
           }
    }).then(res=>{
        
        // this.bannelist=res.data.banners
        this.list=res.data.result
    })

    axios({
           url:'https://autumnfish.cn/personalized/newsong',
           method:'get',
    }).then(res=>{
          console.log(res)
        this.zuixin=res.data.result
    })
  }
  
}

</script>
<style lang='scss' scoped>
</style>